import React from 'react';
import './Loading.css';

const Loading = ({ title, subtitle, progress }) => {
  return (
    <div className="loading-overlay">
      <div className="loading-container">
        <div className="loading-icon-container">
          <svg className="loading-icon" viewBox="0 0 100 100">
            <circle className="loading-icon-bg" cx="50" cy="50" r="45"></circle>
            <path className="loading-icon-check" d="M30 50 L45 65 L70 40"></path>
          </svg>
        </div>
        <h2 className="loading-title">{title}</h2>
        <div className="loading-bar">
          <div className="loading-bar-inner" style={{ width: `${progress}%` }}></div>
        </div>
        <p className="loading-subtitle">{subtitle}</p>
      </div>
    </div>
  );
};

export default Loading;
